<template>
  <!-- 保持原有的模板结构 -->
  <view class="container">
    <!-- 身份证智能识别区域 -->
    <view class="id-card-scan" @click="scanIdCard">
      <view class="scan-icon">
        <uni-icons type="scan" size="36" color="#007AFF"></uni-icons>
      </view>
      <text class="scan-text">身份证智能识别</text>
    </view>

    <!-- 表单内容 -->
    <form @submit="submitForm" @reset="resetForm">
      <!-- 保持原有的表单结构 -->
      <!-- 真实姓名输入框 -->
      <view class="form-item">
        <text class="form-label">真实姓名</text>
        <input class="form-input" type="text" v-model="formData.name" placeholder="请输入姓名" required />
      </view>

      <!-- 性别选择器 -->
      <picker mode="selector" :range="genderList" @change="onGenderChange">
        <view class="form-item picker-item">
          <text class="form-label">性别</text>
          <view class="picker-content">
            <text>{{ formData.gender || '请选择性别' }}</text>
            <uni-icons type="right" size="24" color="#999"></uni-icons>
          </view>
        </view>
      </picker>

      <!-- 日期选择器 -->
      <picker mode="date" @change="onDateChange">
        <view class="form-item picker-item">
          <text class="form-label">出生日期</text>
          <view class="picker-content">
            <text>{{ formData.birthday || '请选择出生日期' }}</text>
            <uni-icons type="right" size="24" color="#999"></uni-icons>
          </view>
        </view>
      </picker>

      <!-- 关系选择器 -->
      <picker mode="selector" :range="relationList" @change="onRelationChange">
        <view class="form-item picker-item">
          <text class="form-label">成员关系</text>
          <view class="picker-content">
            <text>{{ formData.relation || '请选择与成员关系' }}</text>
            <uni-icons type="right" size="24" color="#999"></uni-icons>
          </view>
        </view>
      </picker>

      <!-- 身份证号输入框 -->
      <view class="form-item">
        <text class="form-label">身份证</text>
        <input class="form-input" type="text" v-model="formData.idCard" placeholder="请输入身份证" maxlength="18" />
      </view>

      <!-- 手机号输入框 -->
      <view class="form-item">
        <text class="form-label">手机号</text>
        <input class="form-input" type="tel" v-model="formData.phone" placeholder="请输入手机号" maxlength="11" />
      </view>

      <!-- 按钮区域 -->
      <view class="btn-group">
        <button class="cancel-btn" form-type="reset">取消</button>
        <button class="confirm-btn" form-type="submit">{{ isEditMode ? '确认修改' : '确认添加' }}</button>
      </view>
    </form>
  </view>
</template>

<script>
// 导入API模块
import api from '@/api/index.js'

// 百度AI开放平台配置
const BAIDU_APP_CONFIG = {
  APP_ID: '7007164',         // 应用ID
  API_KEY: 'bAXBTzJlzBNWO00Waj46lvL8',  // 接口密钥
  SECRET_KEY: 'nZKqMeihtMMPG9qn8dzmKPC9g0EVzsil'  // 密钥
};

export default {
  data() {
    return {
      // 表单数据模型
      formData: {
        name: '',        // 真实姓名
        gender: '',      // 性别
        birthday: '',    // 出生日期
        relation: '',    // 成员关系
        idCard: '',      // 身份证号
        phone: ''        // 手机号
      },

      // 页面状态与配置数据
      isEditMode: false,       // 是否为编辑模式
      patientId: '',           // 患者ID
      genderList: ['男', '女'],  // 性别选择列表
      relationList: ['本人', '配偶', '子女', '父母', '其他'],  // 关系选择列表

      // 选择器状态管理
      showGenderPicker: false,
      showDatePicker: false,
      showRelationPicker: false,
      genderIndex: [0],
      relationIndex: [0]
    };
  },

  /**
   * 页面加载生命周期
   */
onLoad(options) {
    // 检查是否有患者ID参数
    if (options.patientId) {
      this.isEditMode = true;
      this.patientId = options.patientId;
      
      // 从后端获取患者数据
      this.getPatientFromBackend();
    }
  },

  methods: {
    /**
     * 从后端获取患者数据
     */
    async getPatientFromBackend() {
      try {
        const res = await api.getPatientByIdApi(this.patientId);
        // 适配后端返回的数据格式
        const patientData = res.data || res;
        // 转换后端字段名到前端表单字段名
        this.formData = {
          name: patientData.name || '',
          gender: patientData.gender || '',
          birthday: patientData.birthDate ? new Date(patientData.birthDate).toISOString().split('T')[0] : '',
          relation: patientData.memberRelationship || '',
          idCard: patientData.idNumber || '',
          phone: patientData.phone || ''
        };
      } catch (error) {
        console.error('获取患者数据失败:', error);
        uni.showToast({
          title: '获取患者数据失败: ' + (error.message || '未知错误'),
          icon: 'none'
        });
      }
    },

    // 保持原有的身份证识别相关方法
    async scanIdCard() {
      try {
        // 选择图片（支持相册和相机）
        const res = await uni.chooseImage({
          count: 1,               // 仅选择1张图片
          sourceType: ['album', 'camera']  // 来源：相册或相机
        });

        // 未选择图片时提示
        if (!res.tempFilePaths.length) {
          return uni.showToast({ title: '未选择图片', icon: 'none' });
        }

        // 获取百度AI访问令牌
        const accessToken = await this.getBaiduAccessToken();

        // 调用OCR接口识别身份证
        const ocrResult = await this.ocrIdCard(res.tempFilePaths[0], accessToken);

        // 解析识别结果并填充到表单
        this.fillFormData(ocrResult);

      } catch (error) {
        // 识别失败处理
        uni.showToast({
          title: '识别失败: ' + (error.message || '未知错误'),
          icon: 'none'
        });
      }
    },

    /**
     * 获取百度AI访问令牌
     * 说明：调用百度OAuth接口获取access_token，用于后续OCR接口调用
     * @returns {string} 访问令牌
     */
    async getBaiduAccessToken() {
      const res = await uni.request({
        url: `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${BAIDU_APP_CONFIG.API_KEY}&client_secret=${BAIDU_APP_CONFIG.SECRET_KEY}`,
        method: 'GET'
      });

      // 令牌获取失败处理
      if (res.statusCode !== 200 || !res.data) {
        throw new Error('获取访问令牌失败');
      }
      return res.data.access_token;
    },

    /**
     * 调用百度OCR接口识别身份证
     * @param {string} imagePath - 图片本地路径
     * @param {string} accessToken - 访问令牌
     * @returns {Object} OCR识别结果
     */
    async ocrIdCard(imagePath, accessToken) {
      // 将图片转换为base64格式（百度OCR接口要求）
      const base64 = await this.imageToBase64(imagePath);

      // 调用身份证识别接口
      const res = await uni.request({
        url: `https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=${accessToken}`,
        method: 'POST',
        header: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data: {
          image: base64,          // base64格式图片
          id_card_side: 'front',  // 识别身份证正面
          detect_risk: 'false'    // 不检测风险
        }
      });

      // 接口调用失败处理
      if (res.statusCode !== 200) {
        throw new Error(`请求失败: ${res.errMsg}`);
      }
      if (res.data.error_code) {
        throw new Error(res.data.error_msg);
      }
      return res.data;
    },

    /**
     * 图片转base64格式
     * 说明：使用uni文件系统API读取图片并转换为base64编码
     * @param {string} path - 图片本地路径
     * @returns {string} base64编码字符串
     */
    imageToBase64(path) {
      return new Promise((resolve, reject) => {
        const fs = uni.getFileSystemManager();
        fs.readFile({
          filePath: path,
          encoding: 'base64',
          success: res => resolve(res.data),
          fail: err => reject(new Error('图片转换失败'))
        });
      });
    },

    /**
     * 填充表单数据
     * 功能：解析OCR识别结果，格式化后填充到表单
     * @param {Object} ocrData - OCR识别结果
     */
    fillFormData(ocrData) {
      const words = ocrData.words_result;
      
      // 处理出生日期格式：支持8位数字（如20160803）和带中文（如2016年08月03日）格式
      let birthday = words?.出生?.words || '';
      if (/^\d{8}$/.test(birthday)) {
        // 8位数字格式转换为yyyy-mm-dd
        birthday = `${birthday.slice(0, 4)}-${birthday.slice(4, 6)}-${birthday.slice(6, 8)}`;
      } else {
        // 带中文格式转换为yyyy-mm-dd
        birthday = birthday.replace(/年|月/g, '-').replace(/日/g, '');
      }
      
      // 填充表单数据
      this.formData = {
        name: words?.姓名?.words || '',               // 姓名
        gender: words?.性别?.words || '',             // 性别
        birthday: birthday,                           // 处理后的出生日期
        idCard: words?.公民身份号码?.words || '',     // 身份证号
        relation: '本人'                              // 默认关系为本人
      };
    },

    /**
     * 性别选择变化处理
     * @param {Object} e - 选择事件对象
     */
    onGenderChange(e) {
      this.formData.gender = this.genderList[e.detail.value];
    },

    /**
     * 出生日期选择变化处理
     * @param {Object} e - 选择事件对象
     */
    onDateChange(e) {
      this.formData.birthday = e.detail.value;
    },

    /**
     * 成员关系选择变化处理
     * @param {Object} e - 选择事件对象
     */
    onRelationChange(e) {
      this.formData.relation = this.relationList[e.detail.value];
    },

    /**
     * 重置表单
     * 功能：清空表单数据并返回上一页
     */
    resetForm() {
      this.formData = {
        name: '',
        gender: '',
        birthday: '',
        relation: '',
        idCard: '',
        phone: ''
      };
      uni.navigateBack({ delta: 1 });
    },

    /**
     * 表单提交处理
     * 流程：表单验证 → 数据处理 → 调用API → 返回上一页
     */
    // 改进submitForm方法，添加loading状态管理
    async submitForm() {
      // 表单验证逻辑
      if (!this.formData.name) {
        return uni.showToast({ title: '请输入真实姓名', icon: 'none' });
      } else if (!this.validateName(this.formData.name)) {
        return uni.showToast({ title: '姓名需为2-10个汉字', icon: 'none' });
      }

      if (!this.formData.gender) {
        return uni.showToast({ title: '请选择性别', icon: 'none' });
      }

      if (!this.formData.birthday) {
        return uni.showToast({ title: '请选择出生日期', icon: 'none' });
      }

      if (!this.formData.relation) {
        return uni.showToast({ title: '请选择成员关系', icon: 'none' });
      }

      if (!this.formData.idCard) {
        return uni.showToast({ title: '请输入身份证号', icon: 'none' });
      } else if (!this.validateIdCard(this.formData.idCard)) {
        return uni.showToast({ title: '请输入有效的身份证号', icon: 'none' });
      }

      if (!this.formData.phone) {
        return uni.showToast({ title: '请输入手机号', icon: 'none' });
      } else if (!this.validatePhone(this.formData.phone)) {
        return uni.showToast({ title: '请输入有效的手机号', icon: 'none' });
      }

      try {
        // 显示加载指示器
        uni.showLoading({ title: '提交中...' });
        
        // 转换前端表单字段名到后端期望的字段名
        const patientData = {
          name: this.formData.name,
          gender: this.formData.gender,
          birthDate: this.formData.birthday,
          memberRelationship: this.formData.relation,
          idNumber: this.formData.idCard,
          phone: this.formData.phone
        };
    
        console.log('提交患者数据:', patientData);
        // 根据模式调用不同的API
        let res;
        if (this.isEditMode) {
          // 编辑模式下添加患者ID并调用更新API
          patientData.id = this.patientId;
          res = await api.updatePatientApi(patientData);
        } else {
          // 添加模式下调用添加API
          res = await api.addPatientApi(patientData);
        }
        
        console.log('API响应:', res);
    
        // 返回上一页并提示操作成功
        uni.navigateBack({
          delta: 1,
          success: () => {
            uni.showToast({
              title: this.isEditMode ? '修改成功' : '添加成功',
              icon: 'success'
            });
          }
        });
    
      } catch (error) {
        // 提交失败处理
        console.error('提交失败:', error);
        uni.showToast({
          title: '提交失败: ' + (error.message || '未知错误'),
          icon: 'none'
        });
      } finally {
        // 确保加载指示器被隐藏
        uni.hideLoading();
      }
    },

    /**
     * 姓名验证
     * 规则：2-10个汉字
     * @param {string} name - 姓名
     * @returns {boolean} 是否有效
     */
    validateName(name) {
      const reg = /^[\u4e00-\u9fa5]{2,10}$/;
      return reg.test(name);
    },

    /**
     * 手机号验证
     * 规则：11位数字，以13-9开头
     * @param {string} phone - 手机号
     * @returns {boolean} 是否有效
     */
    validatePhone(phone) {
      const reg = /^1[3-9]\d{9}$/;
      return reg.test(phone);
    },

    /**
     * 身份证号验证
     * 规则：18位，符合身份证编码规则
     * @param {string} idCard - 身份证号
     * @returns {boolean} 是否有效
     */
    validateIdCard(idCard) {
      const reg = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
      return reg.test(idCard);
    },
  }
}
</script>

<style scoped>
/* 容器样式：设置页面背景和内边距 */
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 身份证识别区域样式 */
.id-card-scan {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.scan-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-text {
  font-size: 32rpx;
  color: #333;
}

/* 表单项目基础样式 */
.form-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
}

/* 表单标签样式 */
.form-label {
  width: 180rpx;
  font-size: 32rpx;
  color: #333;
}

/* 输入框样式 */
.form-input {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  padding: 10rpx 0;
}

.form-input::placeholder {
  color: #999;
}

/* 选择器样式 */
.picker-item {
  position: relative;
}

.picker-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: #333;
}

/* 选择器默认文本样式 */
.picker-content text:empty:before {
  content: attr(data-placeholder);
  color: #999;
}

/* 按钮组样式 */
.btn-group {
  display: flex;
  padding: 30rpx 20rpx;
  background-color: #f5f5f5;
  margin-top: 20rpx;
}

/* 取消按钮样式 */
.cancel-btn {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 32rpx;
  margin-right: 20rpx;
}

/* 确认按钮样式 */
.confirm-btn {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 10rpx;
  font-size: 32rpx;
}
</style>